﻿@using TrainingManagerSystem.WebUI.TrainingManagerSystemService
@model IEnumerable<TrainingManagerSystem.WebUI.TrainingManagerSystemService.AccountCertificate>

@{
    ViewBag.Title = "Index";
}


<link href="~/Content/Css/css.accountCourse.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/Css/jquery.dataTables.css")" rel="stylesheet" />


<!--Content Left-->
<div id="content-left" class="float-left">
    <div class="title-nav">
        Certificate
    </div>
    <ul class="treeview" id="tree">
        <li><span data-id="0" id="All">All</span>
        </li>
        @foreach (var item in (List<Certificate>)ViewBag.Tree)
        {
            if (item.ParentCertificateCategoryId == 0)
            {
            <li class="expandable">
                <div class="hitarea expandable-hitarea"></div>
                <span data-id="@item.CertificateCategoryId">@item.CertificateCategoryName</span>

                <ul style="display: none;">
                    @foreach (var ite in (List<Certificate>)ViewBag.Tree)
                    {
                        if (ite.ParentCertificateCategoryId == item.CertificateCategoryId)
                        {
                        <li><a href="#" data-id="@ite.CertificateCategoryId">@ite.CertificateCategoryName</a></li>
                        }
                    }
                </ul>
            </li>
            }
        }
    </ul>
</div>

<!--Content Right-->
<div id="content-right">

    <div class="title-view bold">View Account Certificate</div>

    <form action="/" method="post">
        <div class="div-search">
            <table width="100%">
                <tr>
                    <td class="label">Account Name</td>
                    <td class="control-field">
                        <input type="text" id="txtaccountName" name="txtaccountName" /></td>
                    <td class="label">Employee ID</td>
                    <td class="control-field">
                        <input type="text" id="txtemployeeId" name="txtemployeeId" /></td>
                </tr>
                <tr>
                    <td class="label">Score</td>
                    <td>
                        <input type="text" id="txtscore" name="score" /></td>
                    <td class="label">Certificate Name</td>
                    <td>
                        <input type="text" id="txtcertificateName" name="txtcertificateName" /></td>
                </tr>
                <tr>
                    <td class="label">Certificate Category</td>
                    <td>
                        <input type="text" id="txtcertificateCategory" name="txtcertificateCategory" /></td>
                    <td class="label">Certificate Provider</td>
                    <td>
                        <input type="text" id="txtcertificateProvider" name="txtcertificateProvider" /></td>
                </tr>
            </table>

        </div>
        <div class="float-right">
            <button type="button" id="submit" class="btn">
                <span class="i-invertedSearchLoupe">SEARCH</span>
            </button>
        </div>
    </form>
    <div class='clear-fix'><span id='setting'>Table configuration</span></div>
    <div id="list-search">
        <table width="100%" id="dataTables">

            <thead>
                <tr>
                    <th>Employee ID</th>
                    <th>Account</th>
                    <th>Full Name</th>
                    <th>Department</th>
                    <th>Certificate Provider</th>
                    <th>Certificate Category</th>
                    <th>Certificate Name</th>
                    <th>Completed Date</th>
                    <th>Time Commit</th>
                    <th>Score</th>
                    <th>Fee</th>
                    <th>Currency Name</th>
                    <th>Contract End Date</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in @Model)
                {
                    <tr>
                        <td>@item.EmployeeId</td>
                        <td><a class="acc" href="#" data-id="@item.EmployeeId">@item.AccountName</a></td>
                        <td>@item.FullName</td>
                        <td>@item.Department</td>
                        <td>@item.CertificateProvider</td>
                        <td>@item.CertificateCategory</td>
                        <td>@item.CertificateName</td>
                        <td class="text-right">@if (@item.CompletedDate != null)
                                               {
                            <text>@item.CompletedDate.Value.ToString("dd-MMM-yyyy")</text>
                                               }
                        </td>
                        <td class="text-right">@if (@item.TimeCommit != null)
                                               {
                            <text>@item.TimeCommit</text>
                                               }</td>
                        <td>@item.Score</td>
                        <td class="text-right">@if (@item.Fee != null)
                                               {
                            <text>@item.Fee</text>
                                               }</td>
                        <td>@item.CurrencyName</td>
                        <td class="text-right">@if (@item.ContractEndDate != null)
                                               {
                            <text>@item.ContractEndDate.Value.ToString("dd-MMM-yyyy")</text>
                                               }</td>
                        <td style='display: none;'>@item.TotalRow</td>


                    </tr>
                }

            </tbody>
        </table>
        <div class="clear-fix"></div>
    </div>
    <div class="clear-fix"></div>
    <div id="details">
        <div class="acTitle">Account Information</div>
        <div class="div-search">
            <table width="100%" style="margin: 25px;">
                <tr>
                    <td class="label bold">Employee ID: </td>
                    <td class="control-field"><span id="EmployeeId"></span></td>
                    <td class="label bold">Rank Name: </td>
                    <td class="control-field"><span id="rankName"></span></td>
                </tr>
                <tr>
                    <td class="label bold">Full Name: </td>
                    <td><span id="fullName"></span></td>
                    <td class="label bold">Department: </td>
                    <td><span id="department"></span></td>
                </tr>
                <tr>
                    <td class="label bold">Account Name: </td>
                    <td><span id="accountName"></span></td>
                    <td class="label bold">Location: </td>
                    <td><span id="location"></span></td>
                </tr>
                <tr>
                    <td class="label bold">Job Title: </td>
                    <td><span id="jobTitle"></span></td>
                    <td class="label bold">Contract Type: </td>
                    <td><span id="contractType"></span></td>
                </tr>
            </table>
        </div>
        <span class="btns">
            <input type="button" value="Close" id="btnCloseI" />
        </span>
    </div>
    <!---table configuaration-->
    <div id="pop">
        <div class='acTitle title-view'>Selected Fields</div>
        <table id='selectedFileds'>
            <tr>
                <td>
                    <input type='checkbox' id='selectAll' />
                    Select all</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Employee Id</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Account Name</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    FullName</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Department</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Certificate Provider</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Certificate Category</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Certificate Name</td>
                <td>
                    <input type='checkbox' checked='checked' class='fields' />
                    Completed Date</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' class='fields' />
                    Time Commit</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Score</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Fee</td>
                <td>
                    <input type='checkbox' class='fields' />
                    Currency Name</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' class='fields' />
                    Contract End Date</td>
                <td>

                <td>

                <td>

                <td></td>
            </tr>
        </table>
        <div class='btns'>
            <input type='button' value='Cancel' id='cancelBtn' />
            <input type='button' value='Accept' id='changeFields' />
        </div>
    </div>
    <div class="clear-fix"></div>
</div>

<div class="clear-fix"></div>
@section scripts {

    <script src="~/Content/Scripts/convertDatetimeJson.js"></script>
    <script src="~/Content/Scripts/jquery.commonFunctions.js"></script>
    <script type="text/javascript">

        var advanceClick = false;
        var objTable;
        var hidden = '';
        var isSelectAll = false;
        var totalRecords = 0;

        //Initial in Account-Course index
        function Initial() {
            $('#selectAll').click(function () {
                isSelectAll = !isSelectAll;
                if (isSelectAll) {
                    $('.fields').each(function () {
                        $(this).attr('checked', 'checked');
                    });
                } else {
                    $('.fields').each(function () {
                        $(this).attr('checked', false);
                    });
                }
            });
            $('#pop').hide();

            $('#details').hide();
            //Show table configuration setting
            $('#setting').click(function () {
                $('#pop').bPopup();
            });
            //Close table configuration
            $('#cancelBtn').click(function () {
                $('#pop').bPopup().close();
            });

            $("#tree").treeview({
                collapsed: true,
                animated: "fast",
                control: "#sidetreecontrol",
                prerendered: true,
                persist: "location"
            });

            //Start set Node All selected
            $("#All").addClass("selected");
        }

        //Show popup when click account name
        function ShowPopupByAccoutName(id) {

            $("#" + id + " a").on('click', function () {
                var em = $(this).attr("data-id");
                $.ajax({
                    url: '@Url.Action("GetAccountDetails", "Account")',
                    type: 'POST',
                    data: { employeeId: em },
                    success: function (da) {
                        $("#EmployeeId").text(da.EmployeeId);
                        $("#fullName").text(da.FullName);
                        $("#rankName").text(da.Rank.RankName);
                        $("#department").text(da.Department.DepartmentName);
                        $("#accountName").text(da.AccountName);
                        $("#location").text(da.Location.LocationName);
                        $("#jobTitle").text(da.JobTitle.JobTitleName);
                        $("#contractType").text(da.ContractType.ContractTypeName);
                    }
                });
                $("#details").bPopup();
            });
        }

        //Close popup
        function ClosePopup(senderId, popId) {
            $('#' + senderId).click(function () {
                $('#' + popId).bPopup().close();
            });
        }

        //Create Datatable 
        function CreateDataTableById(id, columns, wrapper) {
            var cols = [];
            var arr = columns.split(',');
            for (var i = 0; i < arr.length; i++) {
                cols.push({
                    "aTargets": [parseInt(arr[i])],
                    "bVisible": false
                });
            }

            var obj = $("#" + id).dataTable(
                {
                    "sDom": '<"wrapper"tpli>',
                    "aLengthMenu": [[20, 50, 100, 150], [20, 50, 100, "All"]],
                    "iDisplayLength": 20,
                    "sPaginationType": "full_numbers",
                    "aaSorting": [[7, "desc"]],
                    "aoColumnDefs": cols,
                    "bDestroy": true
                });
            $('.' + wrapper).addClass('configurationPaging');

            return obj;
        }

        //Hidden columns: hideColumns is list of columns which will hide : '1,4,6'
        function ChangeTableConfiguration(senderId, tableId, columns, wrapper, popId, pageNumber, pageSize, totals) {
            $('#' + senderId).click(function () {
                var current = $('.paginate_active').text();
                hidden = getColumnsHide(columns);
                try {
                    CreateDataTableById(tableId, hidden, wrapper);
                }
                catch (e) {
                    CreateDataTableById(tableId, hidden, wrapper);
                }
                $('#' + popId).bPopup().close();
                configurationPaging(tableId, pageNumber, pageSize, totals);
                setCurrentPage(current, tableId);
                showTotalRecords(tableId, current, pageSize, totals);
            });
        }

        //get list of columns will hide ( not checked )
        function getColumnsHide(className) {
            var hidden = '';
            $('.' + className).each(function (i) {
                if ($(this).prop('checked') == false) {
                    hidden += i + ',';
                }
            });
            hidden += '13';
            return hidden;
        }

        //Get data from database by page number and data search
        function getDataFromDatabase(idTable, pageNumber, pageSize) {
            var accountName = $("#txtaccountName").val();
            var score = $("#txtscore").val();
            var certificateCategory = $("#txtcertificateCategory").val();
            var employeeId = $("#txtemployeeId").val();
            var certificateName = $("#txtcertificateName").val();
            var certificateProvider = $("#txtcertificateProvider").val();
            var node = 0;
            node = $(".treeview").find(".selected").attr("data-id");

            $.ajax({
                url: '@Url.Action("SearchAjax", "AccountCertificate")',
                type: "POST",
                datatype: "JSON",
                data: { pageSize: pageSize, currentPage: pageNumber, accountName: accountName, score: score, certificateCategory: certificateCategory, employeeId: employeeId, certificateName: certificateName, certificateProvider: certificateProvider, node: node },
                success: function (data) {
                    var old = null;
                    if (objTable.fnGetData(0) != null) {
                        old = objTable.fnGetData(0)[13];
                    }

                    window.objTable.fnClearTable();
                    for (var i = 0; i < data.length; i++) {
                        window.objTable.fnAddData([
                            data[i].EmployeeId,
                            "<a href='javascript:;' data-id='" + data[i].EmployeeId + "'>" + data[i].AccountName + '</a>',
                            data[i].FullName,
                            data[i].Department,
                            data[i].CertificateProvider,
                            data[i].CertificateCategory,
                            data[i].CertificateName,
                            formatJSONDate(data[i].CompletedDate),
                            data[i].TimeCommit,
                            data[i].Score,
                            data[i].Fee,
                            data[i].CurrencyName,
                            data[i].ContractEndDate,
                            data[i].TotalRow
                        ]);
                    }

                    if (objTable.fnGetData(0)[13] != old) {
                        configurationPaging('dataTables', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[13]);
                    }
                    ShowPopupByAccoutName("dataTables");
                    showTotalRecords(idTable, pageNumber - 1, pageSize, objTable.fnGetData(0)[13]);
                }
            });
        }

        $(document).ready(function () {
            Initial();

            //Click details Account
            $(".acc").click(function () {
                var em = $(this).attr("data-id");
                $.ajax({
                    url: '@Url.Action("GetAccountDetails", "Account")',
                    type: 'POST',
                    data: { employeeId: em },
                    success: function (da) {
                        $("#EmployeeId").text(da.EmployeeId);
                        $("#fullName").text(da.FullName);
                        $("#rankName").text(da.Rank.RankName);
                        $("#department").text(da.Department.DepartmentName);
                        $("#accountName").text(da.AccountName);
                        $("#location").text(da.Location.LocationName);
                        $("#jobTitle").text(da.JobTitle.JobTitleName);
                        $("#contractType").text(da.ContractType.ContractTypeName);
                    }
                });
                $("#details").bPopup();
            });

            //Click Node child on treeview
            $("#tree li ul li a").click(function () {
                $("#tree li span").removeClass("selected");
                $("#tree li ul li a").removeClass("selected");
                $(this).addClass("selected");
                getDataFromDatabase('dataTables', 1, $('#dataTables_length option:selected').text());
            });

            //Click Node parent on treeview
            $("#tree span").click(function () {
                $("#tree span").removeClass("selected");
                $("#tree li ul li a").removeClass("selected");
                $(this).addClass("selected");
                getDataFromDatabase('dataTables', 1, $('#dataTables_length option:selected').text());
            });

            //Click search
            $("#submit").click(function () {
                getDataFromDatabase('dataTables', 1, $('#dataTables_length option:selected').text());
            });

            //Enter textbox
            $('.div-search input[type=text]').bind('keypress', function (e) {
                if (e.keyCode == 13) {
                    getDataFromDatabase('dataTables', 1, $('#dataTables_length option:selected').text());
                }
            });

            window.hidden = getColumnsHide('fields');
            window.objTable = CreateDataTableById('dataTables', window.hidden);
            ShowPopupByAccoutName();
            ClosePopup('btnCloseI', 'details');
            ChangeTableConfiguration('changeFields', 'dataTables', 'fields', 'wrapper', 'pop', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[13]);
            $('.wrapper').addClass('configurationPaging');
            configurationPaging('dataTables', 0, $('#dataTables_length option:selected').text(), objTable.fnGetData(0)[13]);
        });
    </script>
}
